﻿<!DOCTYPE html>


<html>


<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<link rel="shortcut icon" type="image/png" href="../assets/logo/logo.png"/>
	<link rel="stylesheet" href="styles.css">

	<script type="importmap">
	  {
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.0/examples/jsm/",
			"three/nodes": "https://cdn.jsdelivr.net/npm/three@0.164.0/examples/jsm/nodes/Nodes.js",
			"pet/": "../src/"
		}
	  }
	</script>
</head>


<body>

	<script type="module">

		import { install, params, dynamics } from "./online-tsl.js";
		import { fordite } from "pet/patterns-tsl/fordite.js";


		var gui = install( fordite, update );
		
		gui.add( params, 'scale' )
			.min( 0 ).max( 4 )
			.name( 'Details' )
			.$input.classList.add( 'top' );

		gui.addColor( params, 'color' )
			.name( 'Color' )
			.$text.classList.add( 'bottom' );
		

		function update() {

			dynamics.scale.value = params.scale;//mapExp( params.scale, 20, 0.1 );
			dynamics.color.value.set( params.color );
		
		}
		
	</script>
</body>
</html>